<script setup>
import axios from 'axios';
import {ref} from 'vue'
import { ElMessage } from 'element-plus'
// 控制显示隐藏
const dialogVisible = ref(false)

// 表单数据
const form = ref({
  name: '',
  place: ''
})

// 打开弹窗
const open = (row) => {
  const {name, place ,id} = row
  form.value.name = name
  form.value.place = place
  form.value.id = id
  dialogVisible.value = true
}

// 编辑确定
const emit = defineEmits(['update-list'])
const onSubmit = async () => {
  if (form.value.name && form.value.place) {
    // 调用修改接口
    await axios.patch(`/edit/${form.value.id}`, {
      name: form.value.name,
      place: form.value.place,
    })
    dialogVisible.value = false
    emit('update-list')
    return
  }
  ElMessage('请输入完整信息')
}



defineExpose({
  open
})

</script>

<template>
  <el-dialog v-model="dialogVisible" title="编辑" width="400px">
    <el-form :model="form">
      <el-form-item label="姓名" >
        <el-input placeholder="请输入姓名" v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input placeholder="请输入籍贯" v-model="form.place" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-input {
  width: 290px;
}
</style>
